import { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { View,Text } from '@tarojs/components'
import { AtButton, AtInput, AtTextarea } from 'taro-ui'
import { getOrderRefundApply,createOrderRefund } from '@/api/order'
import './index.scss'

type State = {
  refundReason: any
  linkman: string
  mobile: string,
	details:any
}
export default class Index extends Component {
  $instance = getCurrentInstance();
  constructor(props) {
    super(props)
    this.state = {
      refundReason: '',
      linkman: '',
      mobile: '',
			details:{}
    }
  }
  state: State
  UNSAFE_componentWillMount() {

	}
	initPage() {
			getOrderRefundApply({
					orderNumber: this.$instance.router.params.orderNumber
			}).then(res => {
					const data = res.data.data
					this.setState({
							details: data,
					})
			})
	}
  componentDidMount() {
		this.initPage()
	}
  UNSAFE_componentWillReceiveProps(nextProps) {}
  changeRefundReason(value) {
    this.setState({
      refundReason: value
    })
  }
  changeLinkMan(value) {
    this.setState({
      linkman: value
    })
  }
  changeMobile(value) {
    this.setState({
      mobile: value
    })
  }
  async handleSubmit() {
    let { refundReason } = this.state
    if (refundReason.trim().length < 3) {
      Taro.showToast({
        icon: 'none',
        title: '退款原因至少输入3个文字'
      })
      return
    }

    let { orderNumber } =  this.$instance.router.params
		let {details} = this.state
		let {refundInfo} = details
		let data = refundInfo.refundMethod[0]
		let refundMethodParams = [{
			refundMethod:data.refundMethod,
			name:data.refundMethodName,
			refundPrice:data.refundPrice
		}]
    try {
      Taro.showLoading({
        title: '退款申请中'
      })
      let res = await createOrderRefund({
        orderNumber,
        refundReason: refundReason.replace(/[\r\n]/g, '').replace(/\s+/g, ''),
        refundPrice:refundInfo && refundInfo.refundPrice,
				clientSource: process.env.TARO_ENV === 'weapp' ? 0 : 9,
				refundMethod:JSON.stringify(refundMethodParams)
      })
      // console.log(res)
      if (!res.data.success) throw Error()
      // console.log(res)
      Taro.redirectTo({
        url: '/pages/order/refund/index?refundApplyNumber=' + res.data.data.refundApplyNumber + '&orderNumber=' + orderNumber
      })
    } catch (error) {
      Taro.showToast({
        icon: 'none',
        title: '退款申请失败，请稍后重试'
      })
    } finally {

    }
  }
  render() {
		let {details} = this.state
		let {refundGoodsItem ,refundInfo} = details
    return <View className='apply'>
      <View className='context'>
        <View className='p'>1. 已使用的卡券，需按销售价格结算扣减。</View>
        <View className='p'>2. 提交退款申请将锁定剩余卡券，退款成功则失效。</View>
      </View>
      <View className='form-wrap'>
			<View className='form-item'>
				<View className='title'>请确认卡券明细</View>
				<View>
					{
						refundGoodsItem && refundGoodsItem.length > 0 ? refundGoodsItem.map((item)=>{
							return <View className="good-item">
								<View className="n">{item.name}</View>
								<View className="d">
									<Text className="t">总数：{item.total}</Text>
									<Text className="t">已使用：{item.used}</Text>
									<Text className="t">零售价：{item.originRetailPrice}</Text>
									</View>
								</View>
						}) : null
					}
						</View>
				</View>
        <View className='form-item esp'>
          <View className='title'>*退款原因：</View>
          <AtTextarea
            value={this.state.refundReason}
            onChange={(val) => this.changeRefundReason(val)}
            maxLength={30}
            showConfirmBar
            placeholder='吐露一下心声(至少输入3个文字哦)...'
          />
        </View>

				<View className='form-item'>
					<View className='title'>请确认退款信息</View>
					<View className='price-item'>退款金额 <Text className="p-box">￥{refundInfo && refundInfo.refundPrice}</Text> </View>
					<View  className='price-item'>
						<Text className="p-k">退款方式</Text>
						<Text className="p-v">微信支付</Text>
					</View>
				</View>


      </View>
      <View className='button-position'><AtButton onClick={this.handleSubmit.bind(this)} type='primary'>提交</AtButton></View>
    </View>
  }
}
